<template>
  <el-dialog
    custom-class="file-manage-dialog"
    :visible.sync="showElDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div slot="title" class="title">
      <div>资料管理</div>
      <i class="el-icon-close" @click="showElDialog = false"></i>
    </div>
    <div class="file-manage-dialog-content">
      <el-tabs v-model="activeName" type="card" class="dark-tab">
        <el-tab-pane label="下载管理" name="download">
          <div class="tab-content">
            <div class="download-top">
              <span>报告号：BF-4555452</span>
              <span style="margin-left: 94px">候选人姓名：：王安石</span>
            </div>
            <el-table
              class="dark-table"
              :data="download.tableData"
              style="width: 100%"
            >
              <!--              <el-table-column type="selection" width="55"> </el-table-column>-->
              <el-table-column prop="NAME" label="文件名称"></el-table-column>
              <el-table-column prop="SIZE" label="大小"> </el-table-column>
              <el-table-column prop="POSTFIX" label="类型"> </el-table-column>
              <el-table-column prop="E_DATETIME" label="最后修改时间">
                <div slot-scope="s">{{ DateTimeParse(s.row.C_DATETIME) }}</div>
              </el-table-column>
              <el-table-column prop="name" label="操作">
                <div slot-scope="s">
                  <el-button type="text" @click="downloadFile(s.row.FILE_NO)"
                    >下载</el-button
                  >
                </div>
              </el-table-column>
              <el-table-column prop="CreateName" label="创建人">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="上传文件" name="update">
          <div class="tab-content" style="padding: 50px">
            <el-upload
              class="upload-demo"
              ref="update"
              :data="{ iTaskNo: $route.query.id }"
              :on-success="onSuccess"
              :headers="updateHeaders"
              :action="GlobalCfg.apiUrl + '/jk/TaskAttachment'"
              :on-remove="handleRemove"
              :file-list="update.fileList"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
            </el-upload>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <!--      <el-button-->
      <!--        v-if="activeName === 'download'"-->
      <!--        type="primary"-->
      <!--        size="medium"-->
      <!--        disabled-->
      <!--        >点击下载</el-button-->
      <!--      >-->
      <el-button
        v-if="activeName === 'update'"
        type="primary"
        size="medium"
        @click="submitFile()"
        >确认上传</el-button
      >
      <!--        :disabled="update.fileList.length === 0"-->
    </div>
  </el-dialog>
</template>
<script>
import { GetResourceList } from "@/api/task/detail.js";
import { downloadFile, getToken } from "@/utils/common";
export default {
  components: {},
  data() {
    return {
      showElDialog: false,
      activeName: "download", //
      download: {
        tableData: []
      },
      update: {
        fileList: []
      },
      updateHeaders: {
        token: getToken()
      }
    };
  },
  created() {},
  mounted: function() {
    this.initResourceList();
  },
  methods: {
    //首字母大写为外部可用方法
    initResourceList() {
      GetResourceList({ taskNo: this.$route.query.id })
        .then(r => {
          this.download.tableData =
            r.CustomerOrderTaskAttachmentModelList || [];
        })
        .catch(() => {});
    },
    onSuccess(response) {
      if (response.success) {
        this.$message.success("文件上传成功");
        this.initResourceList();
        return;
      }
      this.$message.error(response.msg || response.errorMessage);
      this.$refs["update"].clearFiles();
    },
    downloadFile(no) {
      downloadFile(no);
    },
    handleRemove() {},
    ShowFileManageDialog() {
      this.showElDialog = true;
    },
    submitFile() {
      this.$refs["update"].submit();
    }
  }
};
</script>
<style lang="scss">
.file-manage-dialog {
  width: 890px;
  background-color: #383b55;
  color: #fff;
  .close-btn {
    background-color: #b0bee1;
    border: none;
  }
  .title {
    display: flex;
    justify-content: space-between;
    i {
      cursor: pointer;
    }
  }
  .file-manage-dialog-content {
    .tab-content {
      padding: 10px;
      background-color: #1c1e2e;
      .download-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #b9beeb;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-start;
  }
}
</style>
